﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>HTML Shot Demo</title>
    <!--Look the src of styles included files. They are relative.
        The DLL work to convert them to full uri path.-->
    <link href="Styles/HTMLShot.css" rel="stylesheet" type="text/css" media="screen"/>
    <script src="Scripts/HelpersScripts.js" type="text/javascript"></script>
    <script type="text/javascript">
        var titleCheck;
        var titleContainer;
        var pictureCheck;
        var pictureContainer;
        var tableCheck;
        var tableContainer;
        var htmlStringInput;
        var checkBoxFunction;
    </script>
</head>
<body>
    <div id="atkImageContainer">
        <div class="atk">
            <div id="atkTitle">Australtek</div>
            <div id="atkDemo">HTML Shot Demo</div>
            <div class="atkItemsContainers">
                <div class="atkItems" style="background-color:Lime"></div><div class="atkItems" style="background-color:Yellow"></div><div class="atkItems" style="background-color:Red"></div>
            </div>
        </div>
    </div>
    <div id="pictureImageContainer">
        <img id="pictureImage" class="pictureImages" src="Styles/HTMLShotImage.jpg" alt=""/>
    </div>
    <div id="tableImageContainer">
        <table id="tableImage" class="tableImages" border="1">
            <tr>
                <td rowspan="2">Hello</td><td>World</td><td>!!!</td>
                <td rowspan="2">Hello</td><td>World</td><td>!!!</td>
            </tr>
            <tr class="">
                <td>World</td><td>???</td><td>World</td><td>???</td>
            </tr>
            <tr class="">
                <td colspan="6" style="text-align:center">H e l l o  W o r l d</td>
            </tr>
        </table>
    </div>
    
    <form id="form" method="post" action="ServerScripts/HTMLShot.aspx" >
        <p>Choose html objects to add them to the HTMLshot :</p>            
        <input id="atkCheck" type="checkbox" checked="checked" onclick="checkBoxFunction()"/>Title &nbsp;  <br/>
        <input id="pictureCheck" type="checkbox" checked="checked" onclick="checkBoxFunction()"/>Image &nbsp; <br/>
        <input id="tableCheck" type="checkbox" checked="checked" onclick="checkBoxFunction()"/>HTML Table &nbsp; <br/>
        <br />
        <br />
        Width : <input type="text" name="widthValue" maxlength="8" value="0"  />
        Height : <input type="text" name="heightValue" maxlength="8" value="0"  />
        <br />
        <br />
        Chose image format : <select name="bitmapFormatValue">
            <option value="PNG">PNG</option>
            <option value="GIF">GIF</option>
            <option value="BMP">BMP</option>
            <option value="JPEG">JPG</option>
        </select>
        <input id="htmlStringInput" name="htmlStringValue" type="hidden" value=""/>
        
        <input type="submit" value="Generate HTMLshot"/>
    </form>
   
    <script type="text/javascript">        
        titleContainer = document.getElementById('atkImageContainer');
        titleCheck = document.getElementById('atkCheck');
        pictureContainer = document.getElementById('pictureImageContainer');
        pictureCheck = document.getElementById('pictureCheck');
        tableContainer = document.getElementById('tableImageContainer');
        tableCheck = document.getElementById('tableCheck');
    
        htmlStringInput = document.getElementById('htmlStringInput')
    
        checkBoxFunction =  function(){
            try{
                var buffer = "";
                if(titleCheck.checked == true)
                    buffer += titleContainer.innerHTML;
                if(pictureCheck.checked == true)
                    buffer += pictureContainer.innerHTML;
                if(tableCheck.checked == true)
                    buffer += tableContainer.innerHTML;
                    
                htmlStringInput.value = getHtmlString(buffer);
            }
            catch(Error){ htmlStringInput.value = ""; }
        }
        
        checkBoxFunction();
    </script>
</body>
</html>